<template>
    <div class="service">
        <div class="service-box">
            <SectionTitle
                en="SERVICE"
                title="服务项目"
                meta="service Items"
            />
            <div class="service-group">
                <template v-for="(item, index) in list">
                    <router-link
                        v-if="item.path"
                        :to="item.path"
                        class="service-item"
                        :key="index"
                    >
                        <img
                            class="service-item__img"
                            :src="item.img"
                            alt=""
                        />
                        <div class="service-item__title">{{ item.title }}</div>
                        <div
                            class="service-item__content"
                            v-html="item.content"
                        >
                            上传病理数字切片，<br />即可获得AI检测报告
                        </div>
                    </router-link>
                    <div
                        class="service-item"
                        :key="index"
                        v-else
                    >
                        <el-tooltip
                            class="item"
                            effect="light"
                            content="正在建设中......"
                            placement="right"
                        >
                            <div>
                                <img
                                    class="service-item__img"
                                    :src="item.img"
                                    alt=""
                                />
                                <div class="service-item__title">{{ item.title }}</div>
                                <div
                                    class="service-item__content"
                                    v-html="item.content"
                                >
                                    上传病理数字切片，<br />即可获得AI检测报告
                                </div>
                            </div>
                        </el-tooltip>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import SectionTitle from './SectionTitle'

export default {
  components: {
    SectionTitle
  },
  data() {
    return {
      list: [
        // {
        //   img: '/images/index/icon1.png',
        //   title: 'AI自测服务',
        //   content: '上传病理数字切片，<br />即可获得AI检测报告',
        //   path: ''
        // },
        {
          img: '/images/index/icon1.png',
          title: '病理切片咨询服务(病家端入口)',
          content: '',
          path: '/user/consultation'
        },
        {
          img: '/images/index/icon4.png',
          title: '病理远程会诊服务(医生端入口)',
          content: '',
          path: '/login'
        }
        // {
        //   img: '/images/index/icon3.png',
        //   title: '病理代送服务',
        //   content: '如果您想请上海某医院做病理会诊，<br />我们帮你跑腿',
        //   path: '/user/forMedical'
        // },
        // {
        //   img: '/images/index/icon2.png',
        //   title: '贴心陪诊服务',
        //   content: '如果您想来上海就诊，<br />我们提供力所能及的陪同服务',
        //   path: ''
        // }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.service {
  background-color: #fff;
}
.service-box {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 28px;
}
.service-group {
  display: flex;
  justify-content: center;
}
.service-item {
  display: inline-block;
  text-decoration: none;
  &:nth-child(2) {
    margin-left: 190px;
  }
  &:nth-child(3) {
    margin-left: 140px;
  }
  &:nth-child(4) {
    margin-left: 126px;
  }
  &__img {
    display: block;
    height: 48px;
    margin: 0 auto;
  }
  &__title {
    font-size: 20px;
    font-weight: bold;
    color: #226eff;
    line-height: 1;
    padding: 20px 0 12px;
  }
  &__content {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
  }
}
</style>
